<template>
  <a-card class="card w-full" v-if="clientType === PlatformEnum.PC">
    <a :href="formFields.destinationUrl" target="_blank" class="title ell-1">{{ formFields.title }}</a>
    <a :href="formFields.destinationUrl" target="_blank" class="content ell-2">
      {{ formFields.content }}
    </a>
    <div class="flex creative-wrapper">
      <template :key="i" v-for="(item, i) in formFields.pcGoods">
        <div class="creative" v-if="(item.fileList || []).length > 0">
          <a :href="formFields.destinationUrl" target="_blank"
            ><img :src="setBase64Prefix(item.imageContent)" alt=""
          /></a>
          <a :href="formFields.destinationUrl" target="_blank" class="creative__name ell-1">{{ item.name }}</a>
          <a :href="formFields.destinationUrl" target="_blank" class="creative__info ell-1">{{ item.info }}</a>
        </div>
      </template>
    </div>
    <a :href="formFields.destinationUrl" target="_blank" class="extra">查看更多相关信息>></a>
    <div class="footer">
      <span>百姓网</span>
      <span class="ml-2">{{ date }}</span>
      <span class="ml-12 advertising">广告</span>
      <advertising-svg class="ml-12 align-middle" />
    </div>
  </a-card>
  <a-card class="card mobile" v-else-if="clientType === PlatformEnum.MOBILE">
    <a :href="formFields.destinationUrl" target="_blank" class="title ell-2">{{ formFields.title }}</a>
    <a :href="formFields.destinationUrl" target="_blank" class="content ell-3">
      {{ formFields.content }}
    </a>
    <div class="flex creative-wrapper">
      <template :key="i" v-for="(item, i) in formFields.wapGoods">
        <div class="creative" v-if="(item.fileList || []).length > 0">
          <a :href="formFields.destinationUrl" target="_blank"
            ><img :src="setBase64Prefix(item.imageContent)" alt=""
          /></a>
        </div>
      </template>
    </div>
    <div class="footer">
      <span>百姓网</span>
      <advertising-svg class="ml-12 align-middle" />
      <div class="float-right">
        <span class="ml-12 advertising align-middle">广告</span>
        <ellipsis-outlined class="ellipsis-icon align-middle" />
      </div>
    </div>
  </a-card>
</template>

<script lang="ts" setup name="PromotionExample">
import dayjs from 'dayjs'
import { EllipsisOutlined } from '@ant-design/icons-vue'
import AdvertisingSvg from '@/assets/svg/advertising.svg?component'
import type { PromotionFields } from '@/views/promotion/interface'
import { setBase64Prefix } from '@/utils'
import { PlatformEnum } from '@/core/enums/platform'

interface Props {
  formFields: Partial<PromotionFields>
  clientType: PlatformEnum
}

withDefaults(defineProps<Props>(), {
  formFields: () => ({}),
  clientType: PlatformEnum.PC
})

const date = dayjs().format('YYYY-MM')
</script>

<style lang="scss" scoped>
.card {
  max-width: 600px;

  ::v-deep(.ant-card-body) {
    padding: 10px 13px;
  }

  .title {
    color: #2440b3;
    line-height: 25px;
    margin-bottom: 3px;
    font-weight: 400;
    text-decoration: underline;
    font-size: 18px;
    display: block;

    &:hover {
      color: #315efb;
    }
  }

  .content {
    color: #000;
    font:
      13px/21px Arial,
      sans-serif;
    line-height: 21px;
  }

  .creative-wrapper {
    margin-top: 7px;
    overflow-x: auto;
  }

  .creative {
    margin-left: 16px;

    &:first-child {
      margin-left: 0;
    }

    img {
      width: 128px;
      height: 85px;
      border-radius: 12px;
    }

    &__name {
      display: block;
      color: #2440b3;
      line-height: 21px;
      font-size: 14px;
      margin: 7px 0 2px;
      width: 128px;

      &:hover {
        text-decoration: underline;
        color: #315efb;
      }
    }

    &__info {
      width: 128px;
      line-height: 21px;
      display: block;
      font-size: 13px;
      color: #626675;
    }
  }

  .extra {
    margin-top: 6px;
    font-size: 14px;
    line-height: 21px;
    color: #2440b3;
    display: block;

    &:hover {
      text-decoration: underline;
      color: #315efb;
    }
  }

  .footer {
    margin-top: 4px;
    line-height: 21px;
    font-size: 13px;
    color: #626675;

    .advertising {
      color: #b7b9c1;
    }

    .ml-12 {
      margin-left: 12px;
    }
  }
}

.mobile {
  width: 382px;

  ::v-deep(.ant-card-body) {
    padding: 18px 13px 13px;
  }

  .title {
    font:
      18px/24px -apple-system,
      Arial,
      Helvetica,
      sans-serif;
    color: #1e1f24;
    font-weight: 500 !important;
    font-family: -apple-system, Arial, Helvetica, sans-serif;
    -webkit-text-stroke: 0;
    text-decoration: none;
    margin-bottom: 4.5px;

    &:hover {
      color: #1e1f24;
    }
  }

  .content {
    color: #50525c;
    font:
      14px/21px Arial,
      sans-serif;
    line-height: 21px;
  }

  .creative-wrapper {
    overflow-x: auto;
  }

  .creative {
    margin: 0;
    padding: 3px;

    img {
      width: 112px;
      height: 112px;
      border-radius: 9px;
    }
  }

  .footer {
    font-size: 14px;
    margin-top: 5px;
    cursor: pointer;

    .ellipsis-icon {
      font-size: 18px;
      width: 18px;
      height: 18px;
      color: #848691;
      margin-left: 10px;
    }
  }
}
</style>
